<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <template>
    <div>
      <el-button type="primary" size="mini" @click="saveTableForm('tableForm')">保存</el-button>
      <el-form :model="tableForm" ref="tableForm">
        <el-table :data="tableForm.tableData" border stripe>
          <el-table-column label="省份" prop="province"></el-table-column>
          <el-table-column label="城市">
            <template slot-scope="scope">
              <el-form-item label=" " label-width="12px" :prop="'tableData.' + scope.$index + '.city'"
                :rules="tableDataRules.city">
                <el-select size="mini" v-model="scope.row.city" placeholder="请选择" clearable>
                  <el-option v-for="item in scope.row.cityOPtions" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作人">
            <template slot-scope="scope">
              <el-form-item label=" " label-width="12px" :prop="'tableData.' + scope.$index + '.name'"
                :rules="tableDataRules.name">
                <el-input v-model="scope.row.name" placeholder="操作人" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="文件">
            <template slot-scope="scope">
              <el-form-item label=" " label-width="12px" :prop="'tableData.' + scope.$index + '.file'"
                :rules="tableDataRules.file">
                <!-- 在组件的回调函数里加一个索引的参数 -->
                <el-upload multiple action="https://jsonplaceholder.typicode.com/posts/" :on-progress="function(event,file,fileList){
                    return handleUploadProgress(event,file,fileList)}" :on-remove="function(file,fileList){
                    return handleUploadRemove(file,fileList,scope.$index)}" :on-success="function(res,file,fileList){
                    return handleUploadSuccess(res,file,fileList,scope.$index)}"
                  :file-list="uploadFileList[scope.$index]">
                  <el-button type="text">上传文件</el-button>
                </el-upload>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </template>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" src="js/axios.min.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <script>
        export default {
          data() {
            return {
              tableForm: {
                tableData: [
                  {
                    province: "湖北",
                    city: "",
                    cityOPtions: [
                      { label: '武汉市', value: '武汉市' },
                      { label: '宜昌市', value: '宜昌市' }
                    ],
                    name: "",
                    file: '',
                  }, {
                    province: "重庆",
                    city: "",
                    cityOPtions: [
                      { label: '渝北区', value: '渝北区' },
                      { label: '九龙坡区', value: '九龙坡区' }
                    ],
                    name: "",
                    file: '',
                  },
                ],
              },
              tableDataRules: {
                name: [
                  { required: true, message: "请输入姓名", trigger: "blur" },
                ],
                city: [
                  { required: true, message: "请选择城市", trigger: "change" },
                ],
                file: [
                  { required: true, message: "请上传文件", trigger: "change" },
                ],
              },
              uploadFileList: [[]], // 上传文件列表
            };

          },
          methods: {
            // 保存
            saveTableForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  console.log('校验通过', this.tableForm, this.uploadFileList)
                }
              });
            },
            // 预览图片
            handleUploadProgress(event, file, fileList) { },
            // 删除图片
            handleUploadRemove(file, fileList, index) {
              this.tableForm.tableData[index].file = '';
              this.uploadFileList[index] = fileList;
            },
            // 文件上传
            handleUploadSuccess(res, file, fileList, index) {
              this.tableForm.tableData[index].file = res.id;
              // 上传之后,把返回的fileList赋值给对应组件的fileList
              this.uploadFileList[index] = fileList;
            }
          },
        };
  </script>

</body>

</html>